<template>
  <div class="product-manage">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="tempSearchQuery"
        placeholder="商品名称 / 门店名称"
        clearable
        class="search-input"
        @keyup.enter="handleSearch"
      />
      <el-select
        v-model="tempSearchCategory"
        placeholder="商品分类"
        clearable
        class="search-select"
      >
        <el-option label="全部" value="" />
        <el-option v-for="cat in categoryOptions" :key="cat" :label="cat" :value="cat" />
      </el-select>
      <el-select v-model="tempSearchSpec" placeholder="规格类型" clearable class="search-select">
        <el-option label="全部" value="" />
        <el-option label="单规格" value="单规格" />
        <el-option label="多规格" value="多规格" />
      </el-select>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>

    <!-- 商品表格 -->
    <div class="table-wrapper">
      <el-table :data="paginatedProducts" border stripe class="product-table">
        <el-table-column label="序号" width="60">
          <template #default="scope">
            {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="所属门店" min-width="140" />
        <el-table-column prop="name" label="商品名称" min-width="140" />
        <el-table-column prop="category" label="分类" width="140" />
        <el-table-column prop="image" label="商品图片" width="120">
          <template #default="scope">
            <el-image
              v-if="scope.row.image"
              :src="scope.row.image"
              fit="cover"
              style="width: 50px; height: 40px; cursor: pointer"
              :preview-src-list="[scope.row.image]"
            />
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="specType" label="规格" width="100" />
        <el-table-column prop="price" label="价格(￥)" width="120" align="right" />
        <el-table-column prop="stock" label="库存" width="100" align="right" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click.stop="openProductDetail(scope.row)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="filteredProducts.length"
        :page-size="pageSize"
        v-model:current-page="currentPage"
      />
    </div>

    <!-- 商品详情弹窗 -->
    <el-dialog v-model="dialogVisible" title="商品详情" width="700px">
      <el-descriptions border column="2" size="default">
        <el-descriptions-item label="所属门店">
          <b>{{ selectedProduct.storeName }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="商品名称">
          <b>{{ selectedProduct.name }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="商品分类">
          {{ selectedProduct.category }}
        </el-descriptions-item>
        <el-descriptions-item label="规格类型">
          {{ selectedProduct.specType }}
        </el-descriptions-item>
        <el-descriptions-item label="价格">
          <b style="color: red">￥{{ selectedProduct.price }}</b>
        </el-descriptions-item>
        <el-descriptions-item label="库存"> {{ selectedProduct.stock }}</el-descriptions-item>
        <el-descriptions-item label="店铺地址">
          {{ selectedProduct.storeAddress || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ selectedProduct.storePhone || '无' }}
        </el-descriptions-item>
        <el-descriptions-item label="商品图片" :span="2">
          <el-image
            v-if="selectedProduct.image"
            :src="selectedProduct.image"
            fit="cover"
            style="width: 120px; height: 120px; cursor: pointer"
            :preview-src-list="[selectedProduct.image]"
          />
          <span v-else>无</span>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getProducts, type Product } from '@/api/product'

const tempSearchQuery = ref('')
const tempSearchCategory = ref('')
const tempSearchSpec = ref('')

const searchQuery = ref('')
const searchCategory = ref('')
const searchSpec = ref('')

const currentPage = ref(1)
const pageSize = ref(10)

const dialogVisible = ref(false)
const selectedProduct = ref<Product>({} as Product)

const categoryOptions = ['上衣', '裤装', '外套']

const products = ref<Product[]>([])

const handleSearch = () => {
  searchQuery.value = tempSearchQuery.value
  searchCategory.value = tempSearchCategory.value
  searchSpec.value = tempSearchSpec.value
  currentPage.value = 1
}

const resetSearch = () => {
  tempSearchQuery.value = ''
  tempSearchCategory.value = ''
  tempSearchSpec.value = ''
  searchQuery.value = ''
  searchCategory.value = ''
  searchSpec.value = ''
  currentPage.value = 1
}

const filteredProducts = computed(() => {
  return products.value.filter(p => {
    const matchesQuery =
      !searchQuery.value ||
      p.name.includes(searchQuery.value) ||
      p.storeName.includes(searchQuery.value)
    const matchesCategory = !searchCategory.value || p.category === searchCategory.value
    const matchesSpec = !searchSpec.value || p.specType === searchSpec.value
    return matchesQuery && matchesCategory && matchesSpec
  })
})

const paginatedProducts = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredProducts.value.slice(start, start + pageSize.value)
})

const openProductDetail = (row: Product) => {
  selectedProduct.value = row
  dialogVisible.value = true
}

onMounted(async () => {
  products.value = await getProducts()
})
</script>

<style scoped>
.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.search-input {
  width: 240px;
}
.search-select {
  width: 150px;
}

.table-wrapper {
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  overflow-x: auto; /* 保持表格横向滚动 */
  margin-bottom: 12px; /* 分页与表格间距 */
}

.product-table {
  width: 100%;
  table-layout: fixed;
}

.pagination {
  text-align: right;
}
</style>
